<style lang="scss">
@import '../sass/note';
</style>
<template>
<base-scroll v-bind:url="url" v-bind:param="param" @send-data="sendData" ref="baseScroll">
    <div class="note" slot="content">
        <!-- 推荐阅读 -->
        <div class="recommend" v-if="recommendList.length>0">
            <div class="rec-title">
                <img src="/static/images/recommend.png"/>
                <span>推荐阅读</span>
             </div>
             <div class="rec-box">
                <div class="content-box" 
                     v-for="item in recommendList"
                     @click.stop="toNoteDetail(item.contents.noteid)">
                    <div class="box-content">
                        <img src="/static/images/label.png"/>
                        <span class="content-sign">{{item.sign}}</span>
                        <span class="content-title">{{item.recommended_msg}}</span>
                    </div>
                    <div class="box-msg" v-if="item.contents">
                        <span class="msg-time">{{item.contents.note_time}}</span>
                        <span class="msg-name">{{item.contents.note_author_name}}</span>
                        <span class="msg-title">| {{item.contents.user_title}}</span>
                    </div>
                </div>
            </div>
        </div>
         <!-- 内容区 -->
        <div class="content-box">
            <div class="note-box" 
                 v-for="item in noteData"
                 @click.stop="toNoteDetail(item.contentid)"
                 >                  
                <img class="time-line" src="/static/images/timeLine.png"/>
                <div class="box-top">
                    <div class="top-time">{{item.create_time}}</div>
                </div>
                <div class="box-mid">
                    <div class="mid-msg" 
                         @click.stop="toDakaHtml(item.authorDetailAction)">
                        <div class="msg-icon">
                            <img class="icon" :src="item.user_ico" v-if="item.user_ico"/>
                            <img class="icon" src="/static/images/person.png" v-else/>  
                        </div>
                        <div class="msg-notebox">
                            <div class="msg-top">
                                <span class="msg-name">{{item.user_name}}</span>
                                <span class="msg-title"> | {{item.user_title}}</span>
                            </div> 
                            <div class="msg-pro">{{item.user_profiles}}</div>
                        </div>
                    </div>
                    <div class="mid-title" v-if="item.summry">{{item.title}}</div>
                    <div class="mid-int">
                        <div class="int-sign" v-if="item.sign">{{item.sign}}</div>
                        <span :class="['int-title', {'title-indent': item.sign}]" v-if="!item.summry">{{item.title}}</span>
                        <span :class="['int-title', {'title-indent': item.sign}]" v-if="item.summry">{{item.summry}}</span>
                    </div>
                    <img class="mid-img" v-if="item.noteImages.length" :src="item.noteImages[0].imgUrl"/>
                    <img class="mid-img" src="/static/images/zw2.png" v-else-if="item.noteImages.length"/>
                </div>
                <div class="box-bom">
                    <div class="bom-value" v-if="item.value>0">价值{{item.value}}大咖币</div>
                    <div class="bom-scan" v-if="item.readnum!=0">{{item.readnum}}人读过</div>
                    <div class="bom-finger" v-if="item.satifynum>0">{{item.satifynum}}人点赞</div>
                </div>
            </div>
        </div> 
    </div> 
 </base-scroll>
</template>

<script>
import BaseScroll from '@/components/BaseScroll'
export default {
    name: 'Note',
    components: { 
        BaseScroll 
    },
    data(){
        return {
            //笔记推荐
            recommendList:[],
            noteData:{},
            url:'http://gccj.lzyunying.com/api/noteInterface/list.do',
            param: {
                'page_no': 1,
                'page_size': 10,
                'list_type': 2
            },
            layerIndex:'',
        }
    },
    computed:{
    },
    created: function() {
        
    },
    mounted: function() {
        this.loadRecommendData()
        this.$refs.baseScroll.refresh()  
    },
    methods:{
        // 加载推荐数据
        loadRecommendData () {
            var self=this
            $.ajax({
                type: "get",
                url: "http://gccj.lzyunying.com/api/index/reccontent.do",
                data: {
                    positionid: 200102
                },
                dataType: 'json',
                'xhrFields': {
                    withCredentials: true
                },
                success: function (res) {
                    var data=res.data
                    self.recommendList = data
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    //console.log(textStatus);
                }
            })
        },
        // 处理时间戳
        formatRecommendData(data){
            var list,time;
            for(var i in data){
                list = data[i];
                if(!list.contents)continue
                time = list.contents.note_time;
                time = this.$filter.formatTimeLocal(time);
                data[i].contents.note_time = time;
            }
        },
        sendData(data,type){
            if(!type){
                this.noteData=data
            }else{
                this.noteData.push(...data)
            }
        },
        // 处理时间戳
        formatNoteData(data){
            var list,time,readnum
            for(var i in data){
                list = data[i]
                time = list.create_time
                time = this.$filter.formatTimeLocal(time)
                data[i].create_time = time
                readnum=list.readnum
                readnum=this.$filter.dealReadNum(readnum)
                data[i].readnum = readnum
            }
        },
    }
}
</script>